<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

    <title>Jobster | Register</title>

    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link th:href="@{/font-awesome/css/font-awesome.css}" rel="stylesheet"/>

    <link th:href="@{/css/plugins/iCheck/custom.css}" rel="stylesheet"/>

    <!-- Toastr style -->
    <link th:href="@{/css/plugins/toastr/toastr.min.css}" rel="stylesheet" />

    <link th:href="@{/css/animate.css}" rel="stylesheet"/>
    <link th:href="@{/css/style.css}" rel="stylesheet"/>
    <style>
        .middle-box {
            max-width: 600px;
        }
        h1{
            margin-top: -20px;
            margin-bottom: 10px;
        }
    </style>
</head>

<body class="gray-bg">
<div class="middle-box text-center animated fadeInDown">
    <div>
        <div>
            <h1 class="logo-name">JOBSTER</h1>
        </div>
        <h3>Register to Jobster</h3>
        <p>Create account to see it in action.</p>
        <div class="tabs-container">
            <div class="tabs-left">
                <ul class="nav nav-tabs">
                    <li class="active"><a data-toggle="tab" href="#tab-6">Student</a></li>
                    <li class=""><a data-toggle="tab" href="#tab-7">Company</a></li>
                </ul>
                <div class="tab-content ">
                    <div id="tab-6" class="tab-pane active">
                        <div class="panel-body">
                            <form class="m-t" role="form" th:action="@{/user/register}" method="post">
                                <input type="hidden" name="flag" th:value="0"/>
                                <div class="form-group">
                                    <input name="user_name" type="text" class="form-control" placeholder="Name"
                                           required=""/>
                                </div>
                                <div class="form-group">
                                    <input name="user_email" type="email" class="form-control" placeholder="Email"
                                           required=""/>
                                </div>
                                <div class="form-group">
                                    <input name="password" type="password" class="form-control" placeholder="Password"
                                           required=""/>
                                </div>
                                <div class="form-group">
                                    <input type="password" class="form-control" placeholder="Confirm Your Password"
                                           required=""/>
                                </div>
                                <div class="form-group">
                                    <div class="checkbox i-checks">
                                        <label><input type="checkbox"/><i></i> Agree the terms and policy
                                        </label></div>
                                </div>
                                <button type="submit" class="btn btn-primary block full-width m-b">Register</button>
                            </form>
                            <div>
                                <p class="text-muted text-center">
                                    <small>Already have an account?</small>
                                </p>
                                <a class="btn btn-sm btn-white btn-block" th:href="@{/user/login/index.html}">Login</a>
                            </div>
                        </div>
                    </div>
                    <div id="tab-7" class="tab-pane">
                        <div class="panel-body">
                            <form class="m-t" role="form" th:action="@{/user/register}" method="post">
                                <input type="hidden" name="flag" th:value="1"/>
                                <div class="form-group">
                                    <input name="user_name" type="text" class="form-control" placeholder="Name"
                                           required=""/>
                                </div>
                                <div class="form-group">
                                    <input name="user_email" type="email" class="form-control" placeholder="Email"
                                           required=""/>
                                </div>
                                <div class="form-group">
                                    <input name="password" type="password" class="form-control" placeholder="Password"
                                           required=""/>
                                </div>
                                <div class="form-group">
                                    <input type="password" class="form-control" placeholder="Confirm Your Password"
                                           required=""/>
                                </div>
                                <div class="form-group">
                                    <div class="checkbox i-checks">
                                        <label>
                                            <input type="checkbox"/><i></i> Agree the terms and policy
                                        </label>
                                    </div>
                                </div>
                                <button type="submit" class="btn btn-primary block full-width m-b">Register
                                </button>
                            </form>
                            <div>
                                <p class="text-muted text-center">
                                    <small>Already have an account?</small>
                                </p>
                                <a class="btn btn-sm btn-white btn-block" th:href="@{/user/login/index.html}">Login</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <p class="m-t">
            <small>we app framework base on Bootstrap 3 &copy; 2018</small>
        </p>
    </div>
</div>

<!-- Mainly scripts -->
<script th:src="@{/js/jquery-3.1.1.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<!-- iCheck -->
<script th:src="@{/js/plugins/iCheck/icheck.min.js}"></script>
<script th:src="@{/js/plugins/toastr/toastr.min.js}"></script>

<script th:inline="javascript" type="text/javascript">
    //<![CDATA[
    $(function(){
        var errorMsg = [[${errorMsg}]];
        if (errorMsg !== "" && errorMsg != null && errorMsg !== undefined) {
            toastr.error(errorMsg);
        }
    });
    toastr.options = {
        "closeButton": true,
        "debug": false,
        "progressBar": true,
        "preventDuplicates": false,
        "positionClass": "toast-top-right",
        "onclick": null,
        "showDuration": "400",
        "hideDuration": "1000",
        "timeOut": "7000",
        "extendedTimeOut": "1000",
        "showEasing": "swing",
        "hideEasing": "linear",
        "showMethod": "fadeIn",
        "hideMethod": "fadeOut"
    }
    //]]>
</script>
</body>

</html>
